<template>
    <div v-if='!isSelected'>
        <a-button @click='() => add(null)'>
            <template #icon>
                <PlusOutlined />
            </template>
            新增分类
        </a-button>
    </div>
    <div :class='{"m-t-10" : !isSelected}'>
        <a-tree :class='$style.category' defaultExpandAll :tree-data='category' block-node @select='select'>
            <template #title='{dataRef}'>
                <div :class='$style.cateogryItem'>
                    <span>{{dataRef.title}}</span>
                    <div v-if='!isSelected'>
                        <a-dropdown trigger='hover'>
                            <a @click.prevent><EllipsisOutlined /></a>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item><a href='javascript:;' @click='() => add(dataRef)'>新增子分类</a></a-menu-item>
                                    <a-menu-item><a href='javascript:;' @click='() => edit(dataRef)'>编辑</a></a-menu-item>
                                    <a-menu-item><a href='javascript:;' @click='() => deleteCate(dataRef)'>删除</a></a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                </div>
            </template>
        </a-tree>
    </div>
</template>

<script lang='ts' setup>
    import { PlusOutlined, EllipsisOutlined} from '@ant-design/icons-vue'
    const props = defineProps<{
        isSelected? : boolean;
        titleField : string;
        keyField : string;
        parentField : string;
        api : () => Promise<any[]>
    }>()

    const emit = defineEmits<{
        (e : 'select', value : any) : void;
        (e : 'add', value : any) : void;
        (e : 'edit', value : any) : void;
        (e : 'delete', value : any) : void;
    }>()

    import { reactive } from "vue";

    let categoryList:any[] = []
    const category = reactive<any[]>([])

    function recursion(rows:any[], target:any[], parentId:number) {
        rows.forEach(row => {
            if(row[props.parentField] == parentId) {
                let item = {
                    title : row[props.titleField],
                    key : row[props.keyField],
                    children : []
                }

                recursion(rows, item.children, row[props.keyField])

                target.push(item)
            }
        })
    }

    function getCategory(){
        props.api().then(data => {
            category.splice(0)
            if(data) {
                // data.sort(function(a:any, b:any) {
                //     return a.sort - b.sort
                // })
                categoryList = data
                recursion(data, category, 0)
            }
        })
    }

    function queryCategory(id:number) {
        for(let i = 0; i < categoryList.length; i ++) {
            if(id == categoryList[i].id) return categoryList[i]
        }
    }

    function add(data:any) {
        emit('add', data ? {[props.titleField] : data.title, [props.keyField] : data.key} : null)
    }

    function edit(data:any) {
        let cate = {...queryCategory(data.key)}
        if(cate[props.parentField]) {
            cate.parent = queryCategory(cate[props.parentField])
        }
        
        emit('edit', cate)
    }

    function deleteCate(data:any) {
        emit('delete', {[props.titleField] : data.title, [props.keyField] : data.key})  
    }

    function select(selectedKeys, e) {
        if(e.selected) {
            emit('select', {[props.titleField] : e.node.title, [props.keyField] : e.node.key})
        }else {
            emit('select', null)
        }
        
    }

    getCategory()

    defineExpose({
        getCategory
    })


</script>

<style lang='scss' module>
    .category {
        :global(.ant-tree-node-content-wrapper.ant-tree-node-selected) {
            background-color : var(--primaryColor) !important;
            color: #fff;
        }
    }

    .cateogryItem{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{

        }
    }
</style>